<!-- 编辑品牌 -->
 <template>
  <div>
    <el-dialog
      :visible.sync="visible"
      width="50%"
      :before-close="closeDailog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <span slot="title">编辑品牌</span>
      <el-form
        ref="form"
        :model="form"
        label-width="80px"
      >
        <el-form-item
          label-width="80"
          label="品牌LOGO"
        >
        <div v-if="form.logo===''">
          <el-upload
            :file-list="file_list"
            :before-upload="beforelogoUpload"
            :on-change="changeFile"
            action="action"
            :http-request="uploadFile"
            ref="editEnc"
            :class="file_list.length === 0 ? 'styleA' :'styleB'"
            list-type="picture-card"
          >
            <i
              slot="default"
              class="el-icon-plus"
            ></i>
            <div
              slot="file"
              slot-scope="{file}"
            >
              <img
                class="el-upload-list__item-thumbnail"
                :src="form.logo"
                alt=""
              >
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
        </div>
        <div v-else>
            <el-image
              :src="form.logo"
              style="border: 1px dashed #99A9BF; cursor: pointer; width: 100px; height: 100px;"
              @click="handleRemovelogo"
            ></el-image>
        </div>
        </el-form-item>
        <el-form-item label="品牌名称">
          <el-input
            v-model="form.brandName"
            placeholder="请输入品牌名称"
          ></el-input>
        </el-form-item>
        <el-form-item
          label-width="80"
          label="品牌首字母"
        >
          <el-select
            v-model="form.letter"
            placeholder="请选择品牌首字母"
          >
            <el-option
              v-for="item in data"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <div style="text-align: right ;">
            <el-button @click="closeDailog">取消</el-button>
            <el-button
              type="primary"
              @click="editBrand"
            >确定</el-button>
          </div>
        </el-form-item>
      </el-form>

    </el-dialog>

  </div>
</template>
 
 <script>
import { uploadImg , editBrand } from "@/api/api";
export default {
  name: "BrandeditDialog",
  props: {
    Vedit: {
      type: Boolean,
      default: false,
    },
    Branddata: {
      type: Object,
      default: {},
    },
    pageNo:{
      type:Number,
      default:1
    }
  },
  data() {
    return {
      form: {
        brandName: this.Branddata.brandName,
        letter: this.Branddata.letter,
        logo: this.Branddata.logo,
        id: this.Branddata.id,
      },
      visible: this.Vedit,
      number:this.pageNo,
      file_list: [],
      data: [
        { value: "A", label: "A" },
        { value: "B", label: "B" },
        { value: "C", label: "C" },
        { value: "D", label: "D" },
        { value: "E", label: "E" },
        { value: "F", label: "F" },
        { value: "G", label: "G" },
        { value: "H", label: "H" },
        { value: "I", label: "I" },
        { value: "J", label: "J" },
        { value: "K", label: "K" },
        { value: "L", label: "L" },
        { value: "M", label: "M" },
        { value: "N", label: "N" },
        { value: "O", label: "O" },
        { value: "P", label: "P" },
        { value: "Q", label: "Q" },
        { value: "R", label: "R" },
        { value: "S", label: "S" },
        { value: "T", label: "T" },
        { value: "U", label: "U" },
        { value: "V", label: "V" },
        { value: "W", label: "W" },
        { value: "X", label: "X" },
        { value: "Y", label: "Y" },
        { value: "Z", label: "Z" },
      ],
    };
  },
  methods: {
    closeDailog() {
      this.visible = false;
      this.$emit("update:Vedit", false);
    },
    //修改
    async editBrand() {
      const res = await editBrand(this.form);
      if (res.status === 200) {
        this.$message.success("编辑成功");
        this.closeDailog();
        this.$parent.clearSelection()
        this.$parent.getBrandList(this.pageNo)
      } else {
        this.$message.error("编辑失败");
      }
    },
    beforelogoUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isPNG) {
        // 验证图片格式
        this.$message.error("请上传JPG/PNG格式图片!");
      }
      if (!isLt2M) {
        // 验证图片大小
        this.$message.error("请上传小于2M的图片!");
      }
      return isJPG || (isPNG && isLt2M);
    },

    changeFile(file, fileList) {
      this.file_list = fileList;
    },
    handleRemove(file, fileList) {
      this.file_list = fileList;
    },
    handleRemovelogo() {
        this.form.logo = "";
    },
    // 上传图片
    async uploadFile(file) {
      const formData = new FormData();
      formData.append("files", file.file);
      const res = await uploadImg(formData);
      if (res.status === 200) {
        this.form.logo = res.data.result[0];
      } else {
        this.$message.error("上传失败");
      }
    },
  },
};
</script>
 
 <style>
</style>